<script setup lang="ts">
import { computed, ref } from 'vue';
import { useSect } from '../../../composables';
import SectMain from './sect-main.vue';
import SectStewardHall from './sect-steward-hall.vue';
import SectCultivationSpot from './sect-cultivation-spot.vue';
import SectJobHall from './sect-job-hall.vue';
import ScriptureHall from './scripture-hall.vue';

const { state: sectState } = useSect();

const activeScene = ref('sect-main');

const currentSectInfo = computed(() => {
  return sectState.value.sectList.find(
    (item) => item.config.id === sectState.value.currentSect
  );
});

function onChangeScene(id: string) {
  activeScene.value = id;
}
</script>

<template>
  <div v-if="currentSectInfo" class="w-full h-full relative">
    <sect-main
      v-if="activeScene === 'sect-main'"
      @change-scene="onChangeScene"
    ></sect-main>
    <sect-steward-hall
      v-else-if="activeScene === 'sect-steward-hall'"
      @change-scene="onChangeScene"
    ></sect-steward-hall>
    <sect-cultivation-spot
      v-else-if="activeScene === 'cultivation-spot'"
      @change-scene="onChangeScene"
    ></sect-cultivation-spot>
    <sect-job-hall
      v-else-if="activeScene === 'sect-job-hall'"
      @change-scene="onChangeScene"
    ></sect-job-hall>
    <scripture-hall
      v-else-if="activeScene === 'scripture-hall'"
      @change-scene="onChangeScene"
    ></scripture-hall>
  </div>
</template>
